﻿<!DOCTYPE html>
<html lang="zh-CN" ng-app="Emergency">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3600">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智慧管控平台</title>
    <link href="~/Assets/Emergency/css/base.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/index.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Assets/css/lib/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/banner.css" rel="stylesheet" />
    <link href="~/Assets/Emergency/css/font-awesome.min.css" rel="stylesheet" />
    <style>
        .t_title {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }

        #chart_map {
            cursor: pointer;
        }

        .t_show {
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }

        #worktypelist {
            margin: 20px;
        }

            #worktypelist li {
                float: left;
                list-style: none;
                color: white;
                margin-left: 10px;
            }

            #worktypelist span {
                width: 30px;
                height: 15px;
                background-color: grey;
                display: block;
                border-radius: 5px;
                float: left;
                margin: 3px;
            }

        .table_p {
            height: 93%;
            margin-top: 7%;
            position: relative;
        }

        .table_p01 {
            height: auto !important;
            margin-top: 0 !important;
            position: relative;
        }

            .table_p01 table td {
                padding: 6px 0;
            }

        .table_p table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            position: absolute;
            text-align: center;
        }

            .table_p table thead th {
                color: #61d2f7;
                font-size: 14px;
                font-weight: 600;
                padding-top: 5px;
                padding-bottom: 5px;
            }

            .table_p table tbody {
                color: #ffffff;
                font-size: 13px;
            }

                .table_p table tbody tr:nth-child(2n+1) {
                    background-color: #072951;
                    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
                }

        .meter-info {
            width: 16%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap;
            display: inline-block;
        }

        .meter-head {
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .meter-footer {
            color: white;
            font-weight: bold;
            font-size: 18px;
        }

        .meter {
            width: 25px;
            height: 150px;
            display: block;
            margin: 0 auto;
        }

        .table_p {
            line-height: 30px;
            font-size: 18px;
        }

            .table_p span {
                display: block;
                float: left;
                width: 80px;
                font-weight: bold;
                text-align: right;
            }

            .table_p a {
                color: white;
            }

        .menu_btn {
            margin-top: 30px;
            cursor: pointer;
            box-sizing: border-box;
            border: 2px solid red;
            border-image: url(~/Assets/Emergency/img/border.png) 51 38 21 132;
            border-width: 1.125rem 1.583rem 0.875rem 2.5rem;
            width: 100px;
            height: 40px;
            font-size: 14px;
            font-weight: bold;
        }

            .menu_btn a {
                display: block;
                cursor: pointer;
                text-align: center;
            }

        .div-a {
            position: absolute;
        }

        .detail_div {
            background-color: rgba(0,0,0,0.5);
            color: #FFF;
            border-radius: 4px;
            z-index: 999;
            position: fixed;
            width: 300px;
        }

        .detail_text {
            display: none;
            font-size: 17px;
        }

        .menu-active {
            color: #2C58A6;
            font-weight: bold;
        }

        #triangle-topleft {
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-right: 100px solid transparent;
        }

        #triangle-topright {
            width: 0;
            height: 0;
            border-top: 100px solid black;
            border-left: 100px solid transparent;
        }

        .factory-active {
            color: white;
            font-weight: bold;
        }

            .factory-active:hover {
                color: white;
                font-weight: bold;
            }

        .main_title a:hover {
            text-decoration: none;
        }

        .alarm {
            color: red;
        }

        .carInfo {
            width: 0;
            height: 0;
            background: #061f3e;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            border-radius: 8px;
            display: none;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

        .filterbg {
            width: 100%;
            height: 100%;
            background: rgba(30,182,254,0.5);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998;
            display: none;
        }

        .carInfo .carClose {
            display: block;
            width: 44px;
            height: 44px;
            background: url(../../Assets/DashBoard/images/s_ico3.png);
            background-size: 100% 100%;
            position: absolute;
            top: -22px;
            right: -22px;
            display: none;
            transition: 0.3s;
        }

            .carInfo .carClose:hover {
                transform: rotate(180deg);
            }
    </style>
</head>
<body style="overflow:hidden;height:100%;" ng-controller="EmergencyController" ng-init="
      model={};
      model.FactoryAreaId=1;
      GetExhaust();
      GetLocation(model.FactoryAreaId);
      GetDangerPlaceLocation(model.FactoryAreaId);
      GetLocationNowData();
      GetWaterLevelNowData();
      GetTodayAlarmTimes();
      InitSPI();
      GetConstructionWorkLocation();
      DangerPlaceKPI();
      IsShowPort=true;
      today = '@DateTime.Now.ToString("yyyy-MM-dd")'+' 00:00:00';
      end = '@DateTime.Now.ToString("yyyy-MM-dd")'+' 23:59:59';
      GetConstructionWorkList(today,end);
      GetRiskList(model.FactoryAreaId);
      ">
    <div class="weather" style="position:absolute;top:40px;left:30px;color:white;font-size:11px;">
        <p style="font-family:electronicFont;margin:0px;" id="weather_pvg"></p>
        <p style="font-family:electronicFont;margin:0px;" id="weather_dc"></p>
    </div>
    <div class="time_div" style="position: absolute; top: 53px; right: 30px; color: white; font-size:15px;">
        <div id="now"></div>
    </div>
    <!--header-->
    <div class="header">
        <div class="bg_header">
            <div class="header_nav fl t_title">
                安全信息管控平台
            </div>
        </div>
    </div>

    <!--main-->
    <div class="data_content">
        <div class="data_main">
            <div class="main_left fl">
                <div class="left_1 t_btn6" style="cursor: pointer;">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <i class="icon-info"></i>
                        安全指数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_safekpi" class="chart" style="width:100%;height: 280px;">

                    </div>
                </div>
                <div class="left_2" style="cursor: pointer;">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <a href="DeviceList" style="color:white;">
                            <span class="glyphicon glyphicon-warning-sign"></span>
                            危险点&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                    <div class="chart" style="width:100%;height: 280px;">
                        <div id="chart_dangerplace" style="width:49%; height:100%;float:left;">

                        </div>
                        <div id="chart_dangerplacekpi" style="width:49%; height:100%;float:left;">

                        </div>
                    </div>
                </div>
            </div>
            <div class="main_center fl" style="height:530px;">

                <div class="center_text">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <span class="glyphicon glyphicon-globe"></span>
                        厂区地图&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="zhuashou" style="position:absolute;bottom:15px;right:40px; color:white;font-weight:bold;font-size:17px;">
                        <div style="float:left;margin-right:50px;">隐患排查治理</div>
                        <div style="float:left;">风险分级管控</div>
                    </div>
                    <div class="zhuashou" style="position:absolute;bottom:15px;left:40px; color:white;font-weight:bold;font-size:17px;">
                        @*<a style="color:white;" ng-click="ChangeFactory(model);">切换厂区</a>*@
                        <a ng-class="{'factory-active' :model.FactoryAreaId==1}" ng-click="ChangeFactoryByArea(model,1);">浦东</a>&nbsp;&nbsp;
                        <a ng-class="{'factory-active' :model.FactoryAreaId==2}" ng-click="ChangeFactoryByArea(model,2);">大场</a>
                    </div>
                    <div class="menu_list" style="position:absolute;top:40px; right:0;  display:none;">
                        <div><a></a></div>
                        <div class="menu_btn"><a>重点设备</a></div>
                        <div class="menu_btn"><a>重点区域</a></div>
                        <div class="menu_btn"><a>6S</a></div>
                        <div class="menu_btn"><a>智慧消防</a></div>
                        <div class="menu_btn"><a ng-class="{'menu-active' :IsJobHazard}" ng-click="ControlCenter('IsJobHazard');">应急管理</a></div>
                    </div>
                    <div class="alarm" style="position:absolute;top:10px;font-size:16px; width:200px;right:10px;">
                        <div style="text-align:right;margin-right:10px;">
                            <span class="glyphicon glyphicon-bell" style="color:red;"></span><b style="color:red;">：</b><a href="../Emergency/SystemAlarm"><b style="color:red;">{{AlarmTimes}}</b></a> &nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                    <div ng-repeat="location in LocationList">
                        <div class="div-a" ng-style="{'left':location.X+'%','top':(location.Y-5)+'%'}" ng-show="location.Type==1  && IsShowPort">
                            <div ng-mouseover="doMapMouse('Water',location.Id)" ng-mouseleave="MouseLeave('Water',location.Id)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                <a class="titlediv" style="color:gainsboro;" title="{{location.LocationName}}">
                                    <div style="background-color: rgba(0,0,0,0.7);width:35px;height:15px;border-radius:2px;"><p style="top: -2px; position: relative;padding:5px;margin:0px;padding:0px;" ng-repeat="y in LocationNowData" ng-show="y.Id==location.Id && y.Env_ConfigName=='总铬'" ng-class="{'alarm':y.IsAlarm}"><span style="font-weight:bold;">{{y.Values}}</span></p></div>
                                    <img src="~/Images/Monitor/wastewater_1.png" width="30" />
                                </a>
                            </div>
                            <div class="detail_div">
                                <div id="Water{{location.Id}}" class="detail_text">
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.LocationName}}</span></span><br />
                                    <p style="top: -2px; position: relative;padding:5px;margin:0px;padding:0px;" ng-repeat="y in LocationNowData" ng-show="y.Id==location.Id"><span class="glyphicon glyphicon-play"> </span><b>{{y.Env_ConfigName}}：</b><span>{{y.Values}}</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-repeat="location in LocationList">
                        <div class="div-a" ng-style="{'left':location.X+'%','top':(location.Y-5)+'%'}" ng-show="location.Type==2  && IsShowPort">
                            <div ng-mouseover="doMapMouse('Exhaust',location.Id)" ng-mouseleave="MouseLeave('Exhaust',location.Id)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                <a class="titlediv" style="color:gainsboro;" title="{{location.LocationName}}">
                                    <div style="background-color: rgba(0,0,0,0.7);width:35px;height:15px;border-radius:2px;"><p style="top: -2px; position: relative;padding:5px;margin:0px;padding:0px;" ng-repeat="y in LocationNowData" ng-class="{'alarm':y.IsAlarm}" ng-show="y.Id==location.Id &&(y.Env_ConfigName=='非甲烷总烃'||y.Env_ConfigName=='氮氧化合物')"><span style="font-weight:bold;" ng-bind="y.Values" ng-cloak>0</span></p></div>
                                    <img src="~/Images/Monitor/exhaust_1.png" width="30" />
                                </a>
                            </div>
                            <div class="detail_div">
                                <div id="Exhaust{{location.Id}}" class="detail_text">
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.LocationName}}</span></span><br />
                                    <p style="top: -2px; position: relative;padding:5px;margin:0px;padding:0px;" ng-repeat="y in LocationNowData" ng-show="y.Id==location.Id"><span class="glyphicon glyphicon-play"> </span><b>{{y.Env_ConfigName}}：</b><span>{{y.Values}}</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-repeat="location in WaterLevelData">
                        <div class="div-a" ng-style="{'left':location.X+'%','top':(location.Y)+'%'}" ng-show="location.FactoryAreaId==model.FactoryAreaId  && IsShowPort">
                            <div ng-mouseover="doMapMouse('WaterLevel',location.DeviceId)" ng-mouseleave="MouseLeave('WaterLevel',location.DeviceId)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                <a class="titlediv" style="color:gainsboro;" title="{{location.Location}}">
                                    <div style="background-color: rgba(0,0,0,0.7);width:35px;height:15px;border-radius:2px;">{{location.DataValue}}</div>
                                    <img src="~/Assets/Emergency/img/waterlevel.png" width="5" />
                                </a>
                            </div>
                            <div class="detail_div">
                                <div id="WaterLevel{{location.DeviceId}}" class="detail_text">
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.Location}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>设备：</b><span>{{location.DeviceName}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>液位：</b><span>{{location.DataValue}}米</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>时间：</b><span>{{location.DataTime}}</span></span><br />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div ng-repeat="location in DangerPlaceList">
                        <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="IsDangerPlace">
                            <div ng-mouseover="doMapMouse('DangerPlace',location.Id)" ng-mouseleave="MouseLeave('DangerPlace',location.Id)" ng-click="Show3D(location.Name,location.Id);" style="color: #FFF;font-size:12px; border-radius:4px;">
                                <a class="titlediv" style="color:gainsboro;">
                                    <img src="~/Assets/Emergency/img/weixiandian.png" width="20" />
                                </a>
                            </div>
                            <div class="detail_div">
                                <div id="DangerPlace{{location.Id}}" class="detail_text">
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.Location}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>设备：</b><span>{{location.Name}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>危险等级：</b><span>{{location.DangerousLevel}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>数量：</b><span>{{location.CountNum}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>责任部门：</b><span>{{location.Department}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>现场责任人：</b><span>{{location.Administror}}-{{location.AdminContact}}</span></span><br />
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>部门责任人：</b><span>{{location.DepartmentAdmin}}-{{location.DepartmentContact}}</span></span><br />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-repeat="location in RiskList">
                        <div class="div-a" ng-style="{'left':location.X+'%','top':location.Y+'%'}" ng-show="IsShowRisk && location.FactoryAreaId==model.FactoryAreaId">
                            <div ng-mouseover="doMapMouse('Risk',location.Id)" ng-mouseleave="MouseLeave('Risk',location.Id)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                <a class="titlediv" style="color:gainsboro;" target="_blank" href="{{location.FileList[0].FilePath}}">
                                    <img src="~/Assets/Emergency/img/fk.png" width="20" />
                                </a>
                            </div>
                            <div class="detail_div">
                                <div id="Risk{{location.Id}}" class="detail_text">
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{location.WorkSpaceName}}</span></span><br />
                                    @*<span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>危险等级：</b><span>{{location.LevelName}}</span></span><br />*@
                                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>附件：</b><span>{{location.FileList[0].FileName}}</span></span><br />
                                    @*<span ng-repeat="x in location.FileList" style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play" > </span><b></b><span>{{x.FileName}}</span></span><br />*@
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-repeat="location in DangerWorkList">
                        <div class="div-a" ng-style="{'left':location.XAxis+'%','top':location.YAxis+'%'}" ng-show="IsDangerWork && location.FactoryAreaId!=model.FactoryAreaId">
                            <div ng-mouseover="doMapMouse('ConstructionWork',location.FloorConstructionWorkRecordId)" ng-mouseleave="MouseLeave('ConstructionWork',location.FloorConstructionWorkRecordId)" style="color: #FFF;font-size:12px; border-radius:4px;">
                                <a class="titlediv" style="color:gainsboro;">
                                    <img width="30" ng-cloak ng-show="location.Type==1" src="~/Assets/Images/ic_1.png" width="50" />
                                    <img width="30" ng-cloak ng-show="location.Type==2" src="~/Assets/Images/ic_2.png" width="50" />
                                    <img width="30" ng-cloak ng-show="location.Type==3" src="~/Assets/Images/ic_3.png" width="50" />
                                    <img width="30" ng-cloak ng-show="location.Type==4" src="~/Assets/Images/ic_4.png" width="50" />
                                </a>
                            </div>
                            <div class="detail_div">
                                <div id="ConstructionWork{{location.FloorConstructionWorkRecordId}}" class="detail_text">
                                    <span style="top: -2px; position: relative;"><i class="fa fa-sitemap">:</i><span>{{location.Company}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><i class="glyphicon glyphicon-map-marker">:</i><span>{{location.Place}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><i class="icon-users">:</i><span>{{location.OperationPerson}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-wrench">:</span><span>{{location.Content}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-time">:</span><span>{{location.StartTime}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-time">:</span><span>{{location.EndTime}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-user">:</span><span>{{location.FieldPerson}}</span></span><br />
                                    <span style="top: -2px; position: relative;"><span class="glyphicon glyphicon-flag">:</span><span>{{location.FieldDepartment}}</span></span><br />
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="~/Assets/Emergency/img/pvg.png" width="925" ng-show="model.FactoryAreaId==1" ng-cloak />
                    <img src="~/Assets/DashBoard/images/dcArea.jpg" width="925" ng-show="model.FactoryAreaId==2" ng-cloak />

                    <div style="background-color: rgba(0,0,0,0.2);color: #FFF;font-size:12px; width:100%; height:60px; font-size:15px; border-radius:4px;position:absolute;left:0px;top:20px;padding:2px;padding-left:50px;">
                        <div style="float:left;text-align:center;margin-left:0px;">
                            <a ng-click="ControlCenter('IsDangerPlace');" style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">
                                <img src="~/Assets/Emergency/img/weixiandian.png" height="33" />
                                <p ng-class="{'menu-active' :IsDangerPlace}">危险点</p>
                            </a>
                        </div>
                        <div style="float:left;text-align:center;margin-left:20px;">
                            <a ng-click="ControlCenter('IsDangerWork');" style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">
                                <img src="~/Assets/Emergency/img/weixianzuoye.png" height="33" />
                                <p ng-class="{'menu-active' :IsDangerWork}">危险作业</p>
                            </a>
                        </div>
                        @*<div style="float:left;text-align:center;margin-left:20px;">
                            <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="ControlCenter('IsShowPort');">
                                <img src="~/Assets/Emergency/img/sanfei.png" height="33" />
                                <p ng-class="{'menu-active':IsShowPort}">三废</p>
                            </a>
                        </div>*@
                        @*<div style="float:left;text-align:center;margin-left:20px;">
                            <a href="../Dashboard/DashboardPage2">
                                <img src="~/Assets/Emergency/img/iconimg.png" height="33" />
                                <p style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">绿色园区</p>
                            </a>
                        </div>*@
                        <div style="float:left;text-align:center;margin-left:20px;">
                            <img src="~/Assets/Emergency/img/shebei.png" height="33" />
                            <p style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">设备</p>
                        </div>
                        @*<div style="float:left;text-align:center;margin-left:20px;">
                            <img src="~/Assets/Emergency/img/quyu.png" height="33" />
                            <p style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">区域</p>
                        </div>*@
                        @*<div style="float:left;text-align:center;margin-left:20px;">
                            <a href="Part4">
                                <img src="~/Assets/Emergency/img/xiaofang.png" height="33" />
                                <p style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">消防</p>
                            </a>
                        </div>*@
                        <div style="float:left;text-align:center;margin-left:20px;">
                            <img src="~/Assets/Emergency/img/iconimg3.png" height="33" />
                            <p style="color:white;text-align:center;font-family:微软雅黑;font-weight:bold;">应急</p>
                        </div>
                        <div style="float:left;text-align:center;margin-left:20px;">
                            <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="ControlCenter('IsShowRisk');">
                                <img src="~/Assets/Emergency/img/fengkong.png" height="33" />
                                <p ng-class="{'menu-active':IsShowRisk}">风控</p>
                            </a>
                        </div>
                        @*<div style="float:left;text-align:center;margin-left:20px;">
                            <a href="SafeTraining" style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;">
                                <img src="~/Assets/Emergency/img/peixun.png" height="33" />
                                <p>培训</p>
                            </a>
                        </div>*@
                        <div style="float:left;text-align:center;margin-left:20px;">
                            <a href="SafeTraining" style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;">
                                <div style="margin-left:10px; width: 30px;height:30px; background-image: url(../../Assets/Emergency/img/tool.png);background-position:right;"></div>
                                <p>职业健康</p>
                            </a>
                        </div>
                        <!--<a href="#">隐患排查治理</a> &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#">风险分级管控</a>  &nbsp;&nbsp;&nbsp;&nbsp;-->
                    </div>

                </div>
            </div>
            <div class="main_right fr">
                <div class="right_1">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <i class="icon-info"></i>
                        环保指数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_epi" class="echart" style="width:100%;height: 280px;"></div>
                </div>

                <div class="right_2">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="/Images/Monitor/exhaust_1.png" width="25" style="margin-top:-5px;margin-left: 11px;">
                        废气浓度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_exhaust" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div>
                </div>
            </div>
        </div>`
        <div class="data_bottom">
            <div class="bottom_1 fl t_btn5" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title" ng-click="LoginSafeCheck();">
                    <a href="http://182.254.216.126/Floor/FloorPlan" style="color:white;">
                        <span class="glyphicon glyphicon-wrench"></span>
                        危险作业&nbsp;&nbsp;&nbsp;&nbsp;
                    </a>
                </div>
                <div id="dangerwork" class="echart fl" style="width:100%;height: 280px;margin-top: 15px;">
                    <ul id="worktypelist" style="margin-left: 50px;">
                        <li><span style="background-color:forestgreen;" ng-show="ConstructionWorkList.length>0"></span><span ng-show="ConstructionWorkList.length==0"></span>动火</li>
                        <li><span></span>登高</li>
                        <li><span></span>施工</li>
                        <li><span></span>有限空间</li>
                    </ul>
                    <div class="table_p lb-box" id="worklist" style="margin-top:50px;padding-top:1px;">
                        @*<div style="background-color: rgba(18, 78, 216,.2);color: #FFF;font-size:14px; border-radius:4px; margin:20px auto; height:240px; width:90%;">
                                <div><span>施工单位：</span><b>{{ConstructionWork.Company}}</b></div>
                                <div><span>施工地点：</span><b>{{ConstructionWork.Place}}</b></div>
                                <div><span>施工人员：</span><b>{{ConstructionWork.OperationPerson}}</b></div>
                                <div><span>施工内容：</span><b>{{ConstructionWork.Content}}</b></div>
                                <div><span>计划开始：</span><b>{{ConstructionWork.StartTime}}</b></div>
                                <div><span>计划结束：</span><b>{{ConstructionWork.EndTime}}</b></div>
                                <div><span>监督人员：</span><b>{{ConstructionWork.FieldPerson}}</b></div>
                                <div><span>责任部门：</span><b>{{ConstructionWork.FieldDepartment}}</b></div>
                                <div style="position:absolute;top:30px;right:50px;"><a target="_blank" ng-repeat="x in ConstructionWork.FileImageUrl" href="{{x}}"><img ng-src="{{x}}" width="100" style="border:3px solid grey;" /></a></div>
                            </div>*@
                    </div>
                </div>
            </div>
            <div class="bottom_center fl">
                <div class="bottom_2 fl">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <a href="ImportantDeviceList" style="color:white;">
                            <i class="icon-cogs"></i>
                            重点设备&nbsp;&nbsp;&nbsp;&nbsp;
                        </a>
                    </div>
                    <div id="chart_device" class="echart fl" style="width:100%;height: 280px;margin-top: 15px; float:left;"></div>
                </div>
            </div>
            <div class="bottom_center fl" style="margin-left:22px;">
                <div class="bottom_2 fl">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        @*<span class="glyphicon glyphicon-leaf"></span>*@
                        <img src="~/Assets/Emergency/img/sanfei.png" width="23" style="margin-left:38px;margin-top:-2px;" />
                        固废存量&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div id="chart_dangerwaste" class="echart fl" style="width:100%;height: 280px;margin-top: 15px; float:left;"></div>
                </div>
            </div>
            <div class="bottom_4 fr">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <span class="glyphicon glyphicon-tint"></span>
                    废水浓度&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <div class="echart fl" style="width:100%;height: 280px;margin-top: 15px;">
                    <div id="slider" class="lb-box" style="padding-left:50px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="filterbg" style="display: block;background: rgba(18, 78, 216,.4);"></div>
    <div class="carInfo" style="overflow:unset">
        <a href="javascript:;" class="carClose" style="display: block;"></a>
        <div class="lb-box" style="width:94%;margin-top:50px;" id="danger3d">
            <!-- 轮播内容 -->
            <div class="lb-content">
                <div class="lb-item active">
                    <a href="#">
                        <img src="~/Assets/Emergency/img/2014outer.png" alt="picture loss">
                        <span>2014锅炉房外部&nbsp;&nbsp;结构类型:砖瓦结构</span>
                    </a>
                </div>
                <div class="lb-item">
                    <a href="#">
                        <img src="~/Assets/Emergency/img/2014inner_1.png" alt="picture loss">
                        <span>2014锅炉房内部</span>
                    </a>
                </div>
            </div>
            <!-- 轮播标志 -->
            <ol class="lb-sign">
                <li class="active">1</li>
                <li>2</li>
            </ol>
            <!-- 轮播控件 -->
            <div class="lb-ctrl left">＜</div>
            <div class="lb-ctrl right">＞</div>
        </div>
    </div>
</body>

<script src="~/Bussiness/js/base/angular.js"></script>
<script type="text/javascript" src="~/Bussiness/js/base/jquery.min.js"></script>
<script src="~/Bussiness/js/bootstrap.min.js"></script>
<script src="~/Assets/Emergency/js/echarts.min.js"></script>
<script src="~/Assets/Emergency/js/index.js"></script>
<script src="~/Assets/Emergency/js/lb.js"></script>
<script src="~/Bussiness/js/pg/Emergency.js"></script>
<script>
    //InitWasteWater();
    GetWasteWater();
    function GetWasteWater() {
        $.ajax({
            type: "post",
            url: '../Emergency/GetWasteWaterNowData',
            data: { 'FactoryAreaId': 0 },
            success: function (datas) {
                var datalist = datas;
                var content = '<div class="lb-content">';
                var sign = '<ol class="lb-sign">';
                var nav = '<div class="lb-ctrl left">＜</div><div class="lb-ctrl right" >＞</div >';
                for (var i = 0; i < datalist.length; i++) {

                    if (i == 0) {
                        content += '<div class="lb-item active"><a href="#">';
                        sign += '<li class="active">' + (i + 1) + '</li>';
                    }
                    else {
                        content += '<div class="lb-item">';
                        sign += '<li>' + (i + 1) + '</li>';
                    }
                    content += '<div style="margin-top:25px;color:white;font-weight:bold;margin:20px;font-size:15px;">' + datalist[i].Env_Name + '</div>';
                    for (var j = 0; j < datalist[i].DataList.length; j++) {
                        var detail = datalist[i].DataList[j];
                        if (detail.Values == 0 || detail.Values == null) {
                            continue;
                        }
                        content += '<div class="meter-info text-center">';
                        content += '<div class="meter-head"><small>' + detail.Values + '</small> </div>';
                        content += ' <div class="meter meter-striped">';
                        content += ' <div class="meter-bar meter-bar-info active" role="meterbar" style="height:' + (detail.Values / (detail.MaxFlagValue + 2) * 100) + '%"></div></div>';
                        content += ' <div class="meter-footer"><small>' + detail.Env_ConfigName + '</small></div>';
                        content += ' </div>';
                    }
                    content += '</a></div>';
                }
                sign += '</ol>';
                $("#slider").html(content);
                $("#slider").append(sign);
                $("#slider").append(nav);
                const options = {
                    id: 'slider',              // 轮播盒ID
                    speed: 600,              // 轮播速度(ms)
                    delay: 5000,             // 轮播延迟(ms)
                    direction: 'left',       // 图片滑动方向
                    moniterKeyEvent: true,   // 是否监听键盘事件
                    moniterTouchEvent: true  // 是否监听屏幕滑动事件
                }
                const lb = new Lb(options);
                lb.start();
            }, error: function (err) {

            }

        });
    }
    DangerWorkList();
    setInterval(function () {
        DangerWorkList();
    }, 600000);
    function DangerWorkList() {

        $.ajax({
            type: "post",
            url: '../Emergency/GetDangerWorkList',
            data: { 'start': '@DateTime.Now.ToString("yyyy-MM-dd")'+' 00:00:00', 'end': '@DateTime.Now.ToString("yyyy-MM-dd")'+' 23:59:59' },
            success: function (datas) {
                if (datas.length > 0) {
                    var listcontent = "<div class='lb-content'>";
                    var sign = '<ol class="lb-sign" style="right:76px;top:5px;">';
                    var nav = '<div class="lb-ctrl left">＜</div><div class="lb-ctrl right" >＞</div >';
                    for (var i = 0; i < datas.length; i++) {
                        if (i == 0) {
                            listcontent += '<div class="lb-item active" style="background-color: rgba(18, 78, 216,.2);color: #FFF;font-size:14px; border-radius:4px; margin:50px auto; height:240px; width:90%;"><a href="#">';
                            sign += '<li class="active">' + (i + 1) + '</li>';
                        }
                        else {
                            listcontent += '<div class="lb-item" style="background-color: rgba(18, 78, 216,.2);color: #FFF;font-size:14px; border-radius:4px; margin:50px auto; height:240px; width:90%;">';
                            sign += '<li>' + (i + 1) + '</li>';
                        }
                        listcontent += '<div><span>施工单位：</span><b>'+datas[i].Company+'</b></div>';
                        listcontent += '<div><span>施工地点：</span><b>'+datas[i].Place+'</b></div>';
                        //listcontent += '<div><span>施工人员：</span><b>' +datas[i].OperationPerson +'</b></div>';
                        listcontent += '<div><span>施工内容：</span><b>' + datas[i].Content +'</b></div>';
                        listcontent += '<div><span>施工开始：</span><b>' + datas[i].StartTime +'</b></div>';
                        listcontent += '<div><span>施工结束：</span><b>' + datas[i].EndTime +'</b></div>';
                        //listcontent += '<div><span>监督人员：</span><b>' + datas[i].FieldPerson +'</b></div>';
                        listcontent += '<div><span>责任部门：</span><b>' + datas[i].FieldDepartment +'</b></div>';
                        listcontent += '<div style="position:absolute;top:30px;right:50px;"><a target="_blank" href="' + datas[i].FileImageUrl[0] + '"><img src="../Assets/Emergency/img/dhxkz.png" width="100" style="border:3px solid grey;" /></a></div>';
                        listcontent += '</div>';
                    }
                    listcontent += '</div>';
                    $("#worklist").html(listcontent);
                    $("#worklist").append(sign);
                    $("#worklist").append(nav);

                    if (datas.length > 1) {
                        const options = {
                            id: 'worklist',              // 轮播盒ID
                            speed: 600,              // 轮播速度(ms)
                            delay: 5000,             // 轮播延迟(ms)
                            direction: 'left',       // 图片滑动方向
                            moniterKeyEvent: true,   // 是否监听键盘事件
                            moniterTouchEvent: true  // 是否监听屏幕滑动事件
                        }
                        const lb = new Lb(options);
                        lb.start();
                    }
                }
                else {
                    $.ajax({
                        type: 'post',
                        url: '../Emergency/GetLastDangerWorkList',
                        success: function (ret) {
                            var listcontent = "";

                                listcontent += '<div style="background-color: rgba(18, 78, 216,.2);color: #FFF;font-size:14px; border-radius:4px; margin:20px auto; height:240px; width:90%;"><a href="#">';
                                listcontent += '<div><span>施工单位：</span><b>' + ret.Company + '</b></div>';
                                listcontent += '<div><span>施工地点：</span><b>' + ret.Place + '</b></div>';
                                //listcontent += '<div><span>施工人员：</span><b>' + ret.OperationPerson + '</b></div>';
                                listcontent += '<div><span>施工内容：</span><b>' + ret.Content + '</b></div>';
                                listcontent += '<div><span>计划开始：</span><b>' + ret.StartTime + '</b></div>';
                                listcontent += '<div><span>计划结束：</span><b>' + ret.EndTime + '</b></div>';
                                //listcontent += '<div><span>监督人员：</span><b>' + ret.FieldPerson + '</b></div>';
                                listcontent += '<div><span>责任部门：</span><b>' + ret.FieldDepartment + '</b></div>';
                                listcontent += '<div style="position:absolute;top:30px;right:50px;"><a target="_blank" href="' + ret.FileImageUrl[0] + '"><img src="../Assets/Emergency/img/dhxkz.png" width="100" style="border:3px solid grey;" /></a></div>';
                                listcontent += '</div>';

                            $("#worklist").html(listcontent);
                        }
                    });
                }
            }, error: function (err) {

            }

        });
    }

    showtime();
    function showtime() {
        var d = new Date();
        var year = d.getUTCFullYear();
        var month = d.getMonth() + 1;
        var date = d.getDate();
        var hour = d.getHours();
        var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        var sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        var now = "<b>" + year + "年" + month + "月" + date + "日 " + hour + ":" + min + ":" + sec + "</b>";
        $("#now").html(now);
    }
    setInterval(showtime, 1000);

    //GetWeather();
    function GetWeather() {
        $.ajax({
            type: 'GET',
            url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101020300',
            dataType: 'JSON',
            error: function () {
                alert('网络错误');
            },

            success: function (res) {
                if (res != null && res.data != null && res.data.forecast.length > 0) {
                    var today = res.data.forecast[0];
                    var fengli = today.fengli;
                    var htmlcontent = "<img style='width:22px;' src='/Assets/Images/location.png' />大场: " + today.type + "&nbsp;&nbsp;" + today.high + "&nbsp;&nbsp;" + today.low + "&nbsp;&nbsp;" + today.fengxiang + "&nbsp;&nbsp;" + fengli.substring(fengli.lastIndexOf('[') + 1, fengli.indexOf(']')) + "<br/>";
                    $("#weather_dc").html(htmlcontent);
                }
            }
        });

        $.ajax({
            type: 'GET',
            url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101020600',
            dataType: 'JSON',
            error: function () {
            },

            success: function (res) {
                if (res != null && res.data != null && res.data.forecast.length > 0) {
                    var today = res.data.forecast[0];
                    var fengli = today.fengli;
                    var htmlcontent = "<img style='width:22px;' src='/Assets/Images/location.png' />浦东: " + today.type + "&nbsp;&nbsp;" + today.high + "&nbsp;&nbsp;" + today.low + "&nbsp;&nbsp;" + today.fengxiang + "&nbsp;&nbsp;" + fengli.substring(fengli.lastIndexOf('[') + 1, fengli.indexOf(']'));
                    $("#weather_pvg").html(htmlcontent);
                }
            }
        });
    }


    ImportantDevice();
    function ImportantDevice() {
        var myChart = echarts.init(document.getElementById('chart_device'));
        var option1 = {
            legend: {
                show: false,
                x: 'center',
                y: '15%',
                data: ['锅炉', '压力容器', '压力管道', '起重机械', '电梯', '环保设备'],
                icon: 'circle',
                textStyle: {
                    color: 'white',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '类型：{b} <br/> 数量：{c}  <br/>状态：在用'
            },
            series: [
                {
                    name: '重点设备',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: true,
                    label: {
                        show: true,
                        formatter: '{b}:{c}',
                        textStyle: {
                            color: 'white'
                        }
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: [
                        { value: 13, name: '锅炉' },
                        { value: 429, name: '压力容器' },
                        { value: 20, name: '压力管道' },
                        { value: 98, name: '起重机械' },
                        { value: 34, name: '电梯' },
                        { value: 65, name: '环保设备' }
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#63b2ee', '#76da91', '#f8cb7f', '#b6b51f', '#7cd6cf', '#76da91', '#9192ab', '#2F4554', '#C23531', '#749F83', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#749F83', '#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83',];
                                return colorList[params.dataIndex]
                            }
                        },
                    }
                }
            ]
        };
        $.ajax({
            type: "post",
            url: '../Emergency/GetImportantDeviceChart',
            success: function (datas) {
                var datalist = [];
                for (var i = 0; i < datas.length; i++) {
                    var obj = {};
                    obj.name = datas[i].TypeName;
                    obj.value = datas[i].TotalCount;
                    datalist.push(obj);
                }

                option1.tooltip.formatter = function (para) {
                    var content = "";
                    if (para.name == "压力容器") {
                        content = "<b style='color:" + para.color + ";font-size:18px;'>●</b>类型：" + para.name;
                        content += "<br/><b style='color:yellow;font-size:18px;'>●</b>总数：" + para.value;
                        content += "<br/><b style='color:green;font-size:18px;'>●</b>在用：" + (para.value - 1);
                        content += "<br/><b style='color:red;font-size:18px;'>●</b>停用：1";
                    }
                    else {
                        content = "<b style='color:" + para.color +";font-size:18px;'>●</b>类型：" + para.name;
                        content += "<br/><b style='color:yellow;font-size:18px;'>●</b>总数：" + para.value;
                        content += "<br/><b style='color:green;font-size:18px;'>●</b>在用：" + para.value;
                        content += "<br/><b style='color:red;font-size:18px;'>●</b>停用：0";
                    }
                    return content;
                };
                option1.series[0].data = datalist;
                myChart.setOption(option1);
            }, error: function (err) {

            }

        });
        //myChart.setOption(option1);
        //window.addEventListener("resize", function () {
        //    myChart.resize();
        //});
    }

    $('.filterbg').hide();
    $('.carInfo').hide();
    $('.menu_box').on('click', function () {
        $('.filterbg').show();
        $('.carInfo').show();
        $('.carInfo').width('3px');
        $('.carInfo').animate({ height: '70%' }, 400, function () {
            $('.carInfo').animate({ width: '60%' }, 400);
        });
        setTimeout(function () {
            $('.infoBox').show();
            $('.carClose').css('display', 'block');
        }, 800);

    });
    $('.carClose').on('click', function () {
        $('.carClose').css('display', 'none');
        $('.infoBox').hide();

        $('.carInfo').animate({ width: '3px' }, 400, function () {
            $('.carInfo').animate({ height: 0 }, 400);
        });
        setTimeout(function () {
            $('.filterbg').hide();
            $('.carInfo').hide();
            $('.carInfo').width(0);
        }, 800);
    });
    const options = {
        id: 'danger3d',              // 轮播盒ID
        speed: 600,              // 轮播速度(ms)
        delay: 5000,             // 轮播延迟(ms)
        direction: 'left',       // 图片滑动方向
        moniterKeyEvent: true,   // 是否监听键盘事件
        moniterTouchEvent: true  // 是否监听屏幕滑动事件
    }
    const lb = new Lb(options);
</script>
</html>